<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 样式代码初始化 */
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: #f5f5f5;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB','Microsoft YaHei', Arial, 'sans-serif';
        }
        li{
            list-style: none;
        }
        /* 代码主体 */
        /* 版心--安全区 */
        .main{
            width: 1100px;
            margin: 0 auto;
        }
        /* 容器盒子 */
        .box{
            width: 900px;
            height: 438px;
            background: #fff;
            margin: 30px auto 0;
            border-left: 1px solid #d3d3d3;
            border-right: 1px solid #d3d3d3;
            padding: 40px;
        }
        .box>h1{
            line-height: 40px;
            color: #101010;
            font-size: 24px;
            font-weight: normal;
            border-bottom: 2px solid #C20C0C;
            margin-bottom: 30px;
        }
        .box>ul>li{
            width: 152px;
            height: 178px;
            /* box-shadow: 0 0 3px red; */
            float: left;
            margin-right: 35px;
            cursor: pointer;
        }
        /* 选择器小技巧：n从0开始的整数-5、10、15_ _ _ */
        .box>ul>li:nth-of-type(5n){
            margin-right: 0;
        }
        /* 选择器小技巧：n从0开始的整数-5、10、15_ _ _ */
        .box>ul>li:nth-of-type(-n+5){
            margin-bottom: 10px;
        }
        /* 上 */
        .box>ul>li .img_box{
            height: 130px;
            /* background: lawngreen; */
            margin-bottom: 8px;
            background-image: url('./imgs/coverall_8.png');
            background-position: 0 -845px;
            position: relative;
        }
        .song{
            display: block;
            width: 130px;
            height: 130px;
        }
        /* 文本描述 */
        .box>ul>li .title_box{
            height: 40px;
            /* background: lightblue; */
        }
        .box>ul>li .title_box h2{
            font-size: 14px;
            line-height: 20px;
            color: #101010;
            font-weight: normal;
        }
        .box>ul>li .title_box p{
            line-height: 17px;
            color: #666;
            font-size: 12px;
        }
        /* 单行文本省略号 */
        .box>ul>li .title_box h2,
        .box>ul>li .title_box p{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* 播放按钮 */
        .play{
            position: absolute;
            right: 32px;
            bottom: 10px;
            width: 28px;
            height: 28px;
            /* 初始化隐藏 */
            display: none;
        }
        .box>ul>li:hover .play{
            display: block;
        }
    </style>
</head>
<body>
    <!-- 版心 -->
    <div class="main">
        <!-- 容器盒子 -->
        <div class="box">
            <!-- 标题 -->
            <h1>热门新碟</h1>
            <!-- 列表 -->
            <ul>
                <li>
                    <!-- 上 -->
                    <div class="img_box">
                        <img class="song" src="./imgs/01.jpg" alt="">
                        <img class="play" src="./imgs/icn_ply_hvr.png" alt="">
                    </div>
                    <!-- 下 -->
                    <div class="title_box">
                        <h2>习惯晚睡</h2>
                        <p>李荣浩</p>
                    </div>
                </li>
                <li>
                    <!-- 上 -->
                    <div class="img_box">
                        <img class="song" src="./imgs/02.jpg" alt="">
                        <img class="play" src="./imgs/icn_ply_hvr.png" alt="">
                    </div>
                    <!-- 下 -->
                    <div class="title_box">
                        <h2>习惯晚睡</h2>
                        <p>李荣浩</p>
                    </div>
                </li>
                <li>
                    <!-- 上 -->
                    <div class="img_box">
                        <img class="song" src="./imgs/03.jpg" alt="">
                        <img class="play" src="./imgs/icn_ply_hvr.png" alt="">
                    </div>
                    <!-- 下 -->
                    <div class="title_box">
                        <h2>习惯晚睡</h2>
                        <p>李荣浩</p>
                    </div>
                </li>
                <li>
                    <!-- 上 -->
                    <div class="img_box">
                        <img class="song" src="./imgs/04.jpg" alt="">
                        <img class="play" src="./imgs/icn_ply_hvr.png" alt="">
                    </div>
                    <!-- 下 -->
                    <div class="title_box">
                        <h2>All Too Well (10 Minutes) love</h2>
                        <p>李荣浩</p>
                    </div>
                </li>
                <li>
                    <!-- 上 -->
                    <div class="img_box">
                        <img class="song" src="./imgs/05.jpg" alt="">
                        <img class="play" src="./imgs/icn_ply_hvr.png" alt="">
                    </div>
                    <!-- 下 -->
                    <div class="title_box">
                        <h2>习惯晚睡</h2>
                        <p>李荣浩</p>
                    </div>
                </li>
                <li>
                    <!-- 上 -->
                    <div class="img_box">
                        <img class="song" src="./imgs/06.jpg" alt="">
                        <img class="play" src="./imgs/icn_ply_hvr.png" alt="">
                    </div>
                    <!-- 下 -->
                    <div class="title_box">
                        <h2>习惯晚睡</h2>
                        <p>李荣浩</p>
                    </div>
                </li>
                <li>
                    <!-- 上 -->
                    <div class="img_box">
                        <img class="song" src="./imgs/07.jpg" alt="">
                        <img class="play" src="./imgs/icn_ply_hvr.png" alt="">
                    </div>
                    <!-- 下 -->
                    <div class="title_box">
                        <h2>Hikaru Utada Live See i love</h2>
                        <p>李荣浩+黄晓明+邓超+捷克俊逸</p>
                    </div>
                </li>
                <li>
                    <!-- 上 -->
                    <div class="img_box">
                        <img class="song" src="./imgs/08.jpg" alt="">
                        <img class="play" src="./imgs/icn_ply_hvr.png" alt="">
                    </div>
                    <!-- 下 -->
                    <div class="title_box">
                        <h2>习惯晚睡</h2>
                        <p>李荣浩</p>
                    </div>
                </li>
                <li>
                    <!-- 上 -->
                    <div class="img_box">
                        <img class="song" src="./imgs/09.jpg" alt="">
                        <img class="play" src="./imgs/icn_ply_hvr.png" alt="">
                    </div>
                    <!-- 下 -->
                    <div class="title_box">
                        <h2>习惯晚睡</h2>
                        <p>李荣浩</p>
                    </div>
                </li>
                <li>
                    <!-- 上 -->
                    <div class="img_box">
                        <img class="song" src="./imgs/10.jpg" alt="">
                        <img class="play" src="./imgs/icn_ply_hvr.png" alt="">
                    </div>
                    <!-- 下 -->
                    <div class="title_box">
                        <h2>习惯晚睡</h2>
                        <p>李荣浩</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>